<!-- 公共聊天页面 -->
<template>
  <el-container style="background-color: #F6F7F8;height: 75vh;border: 1px grey solid;border-radius: 4px;"  v-loading="dataLoading" element-loading-text="拼命加载中">
    <el-header style="text-align: center;border-bottom:solid grey 1px;">
      <div style="margin-top: 15px;display: inline-block;">{{ yourInfo.name }} {{ $route.params.id }}</div>
    </el-header>

    <el-main style="padding: 0px;">
      <div ref="window" style="height: 62vh;overflow-y: auto;">
        <div v-for="(item,index) in chatData" :key="index">
          <template v-if="index==0">
            <div style="font-size: small;color: gray;text-align: center;">{{getMoment(new Date(item.chatTime)) }}</div>
          </template>

          <template v-if="chatData[index-1]">
            <template v-if="((new Date(item.chatTime).getTime()-new Date(chatData[index-1].chatTime).getTime())/1000)>300">
            <div style="font-size: small;color: gray;text-align: center;">{{getMoment(new Date(item.chatTime)) }}</div>
          </template>
        </template>
        
          <template v-if="item.receiveRole != 'ai'">
            <el-avatar :src="yourInfo.headIcon"></el-avatar>
            <div class="msg" style="margin-left: 5px;border-radius: 0 9px 9px 9px;">{{ item.chatInfo }}</div>
          </template>
          <template v-else>
            <div style="text-align: end;">
              <div class="msg" style="border-radius: 9px 0px 9px 9px;margin-right: 5px;">{{
                item.chatInfo }}</div>
              <el-avatar :src="require(`D:/staticFile/hr/headIconImg/${$store.state.headIcon}`)"></el-avatar>
            </div>
          </template>
        </div>
      </div>
    </el-main>

    <el-footer style="border-top:solid grey 1px;text-align: center;height: fit-content;">

      <el-input type="textarea" resize="none" autosize placeholder="请输入内容" v-model="msg.chatInfo" clearable
        style="width: 35vw;margin-top: 10px;margin-bottom: 10px;margin-left: 10px;">
      </el-input>

      <el-button type="primary" size="mini" plain style="margin: 13px 15px;" @click="sendMsg()">发送消息</el-button>
    </el-footer>
  </el-container>


</template>

<script>
import { askAI } from '@/api/ai';
import { getCommonExpressions, getConcretChat, getDraft, updateDraft, write } from '@/api/chat';
import moment from 'moment';

export default {
  data() {
    return {
      dataLoading:false,
      //这个信息用切换路由初始化
      yourInfo: {
        AIid: 1,
        name: "ai客服",
        headIcon: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      },
      msg: {
        sendRole: "hr",
        sendId: this.$store.state.hrId,
        receiveRole: "ai",
        receiveId: 1,
        chatInfo: "",
        chatType: 0,
        isRead: 0
      },
      commonExpression: [],
      chatData: [],
    }
  },
  methods: {
    getMoment(time){
      const now=moment()
      const chatMoment=moment(time)
      if (chatMoment.isSame(now,'day')) {
        return `今天 ${chatMoment.format('HH:mm')}`
      }else if (chatMoment.isSame(now.clone().subtract(1,"day"),"day")) {
        return `昨天 ${chatMoment.format('HH:mm')}`
      }else{
        return chatMoment.format('YYYY-MM-DD-HH:mm')
      }
    },
    sendMsg() {
      write(this.msg).then(res => {
        this.getInfoScroll()
        this.msg.chatInfo = ""
      })
      askAI({ "question": this.msg.chatInfo }).then(res => {
        write({
          sendRole: "ai",
          sendId: 1,
          receiveRole: "hr",
          receiveId: this.$store.state.hrId,
          chatInfo: res.data.answer,
          chatType: 0,
          isRead: 0
        }).then(response => {
          this.getInfoScroll()
        })
      })
    },
    //获取信息并初始化
    getInfo() {
      // this.yourInfo.AIid = 1;
      // this.msg.receiveId = 1;
      getConcretChat({
        "myRole": "hr",
        "myId": this.$store.state.hrId,
        "yourRole": "ai",
        "yourRoleId": 1
      }).then(res => {
        this.chatData = res.data
      })
    },
    // 获取信息并 滚动条移动到底部
    getInfoScroll() {
      this.yourInfo.AIid = 1;
      this.msg.receiveId = 1;
      getConcretChat({
        "myRole": "hr",
        "myId": this.$store.state.hrId,
        "yourRole": "ai",
        "yourRoleId": 1
      }).then(res => {
        this.chatData = res.data
        this.dataLoading=true
        setTimeout(() => {
          if (this.$refs.window) {
            this.$refs.window.scrollTop = this.$refs.window.scrollHeight
          }
          this.dataLoading=false
        }, 300)

      })
    },
  },
  updated() {

  },
  mounted() {
    this.getInfoScroll()
    getDraft({
      "myRole": "hr",
      "myId": this.$store.state.hrId,
      "yourRole": "ai",
      "yourRoleId": 1
    }).then(res => {
      this.msg.chatInfo = res.data
    })
  },
  beforeDestroy() {
    // 把草稿更新到后端
    updateDraft(this.msg).then(res => {
    })
  },
}
</script>

<style>
.msg {
  display: inline-block;
  width: fit-content;
  background-color: white;
  padding: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .12), 0 0 2px rgba(0, 0, 0, .04);
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>